<template>
  <el-container style="height: 100vh;">
    <!--左侧菜单-->
    <el-aside width="200px">
      <el-menu
              :unique-opened="true"
              :default-active="$route.path"
              background-color="rgba(16, 26, 28, 1)"
              text-color="#f2f2f2"
              active-text-color="#ffffff"
      >
        <template v-for="item in menus">
          <el-submenu :index="item.path" :key="item.path">
            <template slot="title">
              {{ item.title }}
            </template>
            <el-menu-item
                    v-for="child in item.child"
                    :key="child.title"
                    :index="`${item.path}${child.path}`"
                    @click="toPath(item, child)"
            >
              {{ child.title }}
            </el-menu-item>
          </el-submenu>
        </template>
      </el-menu>
    </el-aside>


    <el-container>
      <el-header class="nav">
        <!--头部-->
        <el-form :inline="true">
          <el-form-item>
            <el-button>API</el-button>
          </el-form-item>

          <el-form-item>
            <el-button>git</el-button>
          </el-form-item>

          <el-form-item>
            <el-button>公司邮箱</el-button>
          </el-form-item>
        </el-form>
        <s-header />
      </el-header>
      <el-main>
        <el-divider class="bg-gray">{{ title }}</el-divider>
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script>

  export default {
    name: 'Home',
    data() {
      return {
        title: '',
        menus: [
          {
            path: '/user',
            title: '个人中心',
            child: [
              { path: '/task', title: '我的任务' },
              { path: '/integral', title: '我的积分' }
            ],
          },

          {
            path: '/inform',
            title: '通知公告',
            child: [
              { path: '/inside', title: '内部通知' },
              { path: '/section', title: '行政公告' }
            ],
          },

          {
            path: '/charter',
            title: '凯拓宪章',
            child: [
              { path: '/kai', title: '凯拓宪章' },
              { path: '/rules', title: '细则规章' },
              { path: '/fu', title: '附件表格' }
            ],
          },
        ],
      };
    },
    methods: {
      toPath(parent, child) {
        sessionStorage.setItem('title', child.title);
        this.$router.push(parent.path + child.path);
      },
    },
    mounted() {
      this.title = sessionStorage.getItem('title');
    },
    watch: {
      /**
       * 监听路由，为title赋值
       */
      $route() {
        this.title = sessionStorage.getItem('title');
      },
    },
  };
</script>

<style lang="scss" scoped>
  .el-aside {
    background-color: rgba(16, 26, 28, 1);
    .el-menu {
      border-right-width: 0;
      width: 100%;
    }
  }
</style>